<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签管理</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/server.js"></script>
    <script src="/static/js/tools.js"></script>
    <script src="/static/js/qs.js"></script>
</head>

<body>
    <div id="app">
        <div class="container col-md-3 col-md-8">
            <div class="py-4">
                <h2>添加标签</h2>
                <div class="mb-3">
                    <label class="form-label">标签名称:</label>
                    <input type="text" class="form-control" id="title" v-model="tag.name" />
                </div>
                <div class="row mb-3">
                    <div class="col">
                        <label class="form-label">作者:</label>
                        <input type="text" class="form-control" id="created_by" v-model="tag.created_by" />
                    </div>
                </div>
                <div class="d-flex fle-row justify-content-between">
                    <div>
                        <a class="btn btn-primary" href="/app/view/index.html">取消</a>
                        <button class="btn btn-primary" @click="submitTag">提交</button>
                    </div>
                    <button class="btn btn-primary" @click="tag = {}">重置</button>
                </div>
            </div>
            <div class="border-top my-3"></div>
            <div class="table-responsive py-4">
                <h2>标签信息</h2>
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr class="text-center">
                            <th>标签</th>
                            <th>作者</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in tags" :key="item.id" style="max-height:50px;">
                            <td class="col-3">{{item.name}}</td>
                            <td class="col-3">{{item.created_by}}</td>
                            <td class="col-2">
                                <a class="btn btn-primary" @click="removeTagEvent(item.id)">删除</a>
                                <a class="btn btn-primary" @click="editTagEvent(item)">修改</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            tag: {
                id: 0,
                name: "",
                created_by: "",
            },
            tags: [],
        },
        created() {
            this.getTagInfo();
        },
        methods: {
            getTagInfo() {
                let id = tools.getUrlParams(window.location.href, 'id');
                if (id > 0) {
                    axios.get('http://127.0.0.1:8001/user/queryTag', { params: { id: id } }).then(res => {
                        if (res.code != 200) {
                            return;
                        }
                        this.tag = res.data;
                    })
                }
                axios.get('http://127.0.0.1:8001/user/queryTags').then(res => {
                    console.log(res);
                    if (res.code != 200) {
                        return;
                    }
                    this.tags = res.data;
                })
            },
            submitTag() {
                let uri = this.tag.id > 0 ? 'editTag' : 'addTag';
                axios.post(`http://127.0.0.1:8001/user/${uri}`, this.tag).then(res => {
                    console.log(res)
                    if (res.code != 200) {
                        console.log(res.msg)
                        return;
                    }
                    this.tag = {};
                    this.getTagInfo();
                })
            },
            editTagEvent(tag) {
                this.tag = Object.assign({}, tag);
            },
            removeTagEvent(tag) {
                axios.post('http://127.0.0.1:8001/user/removeTag', { id: tag.id }).then(res => {
                    this.tags = res.data;
                })
            },
        },

    })
</script>

</html>